<template>
  <div class='login'>
    <div class='login-con'>
      <div class="login-title">
        <logo></logo>
        <label>{{title}}</label>
      </div>
      <login-form @on-success-valid='handleSubmit'></login-form>
      <Alert type='error' v-if='errorMessage'>{{this.errorMessage}}</Alert>
    </div>
  </div>
</template>

<script lang='ts'>
  import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
  import {mapActions, mapMutations, mapState} from 'vuex';
  import LoginForm from './login-form.vue';
  import logo from '@/component/logo.vue';
  import {settings} from '@/config/Settings';
  import {authBloc} from '@/store/module/Auth';
  import {userBloc} from '@/store/module/User';
  import {store} from '@/store/Store';

  @Component({
    components: {
      LoginForm, logo
    },
    computed: mapState([]),
    methods: {
      ...mapMutations([]),
      ...mapActions([
        'handleLogin',
        'getUserInfo'
      ])
    }
  })
  export default class extends Vue {
    @Prop({type: Number})
    readonly init!: number;

    $refs!: {};

    handleLogin!: (dat: any) => Promise<void>;
    getUserInfo!: () => Promise<void>;
    errorMessage: string = '';
    title: string = 'iRest云管理平台';

    @Watch('name')
    nameChanged(newVal: string, oldVal: string) {

    }

    created() {
    }

    mounted() {
    }

    updated() {
    }

    destroyed() {
    }

    handleSubmit({email, password, from}: { email: string, password: string, from:any}) {
      if (from === '1') {
          authBloc.login(email, password, from)
              .then(res => {
                  return userBloc.renew();
              })
              .then(res => {
                  this.$router.push({
                      name: settings.homeName
                  });
              }).catch(err => {
              this.errorMessage = err.message;
          });
      } else {
            authBloc.login2(email, password, from)
                .then(res => {
                    return userBloc.renew();
                })
                .then(res => {
                    this.$router.push({
                        name: settings.homeName
                    });
                }).catch(err => {
                this.errorMessage = err.message;
            });
        }
    }
  }
</script>

<style lang='less'>
  .login {
    width: 100%;
    height: 100%;
    background-color: rgba(236, 239, 244, 1);
    display: flex;
    justify-content: center;
    align-items: center;

    &-con {
      width: 520px;
      height: 580px;
      background: #fff;
      padding: 0 70px;
      box-shadow: 0 0 15px #ccc;

      .login-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 0;

        label {
          color: #0079FE;
          font-size: 25px;
          padding: 20px;
        }
      }
    }
  }
</style>
